{% extends "base.html" %}
{% block page_title %}Add Project - Step {{ wizard.steps.step1 }}{% endblock %}

{% load i18n %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block head %}
{{ wizard.form.media }}
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="error-messages">{{ wizard.non_form_errors }}</div>
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="card">
      <div class="cardface">
        <form action="." method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ wizard.management_form }}

          <h1>Labels</h1>
          <h3>Description</h3>
          <p>In the <strong>Labels</strong> section, we will create categories for labeling. These labeled observations will be used to train a classification model that predicts which of these categories a new observation is most likely to be.</p>
          <h3>Instructions</h3>
          <p>Please fill-in below the names of the categories you are interested in predicting.  If you have more than two labels, use the <code>add label</code> button to add more rows to the form. If you decide that you want to remove a label after adding it, use the <code>remove label</code> button to remove the label name.</p>
          <p><i>Labeling Notes:</i></p>
          <ul class="list-group">
            <li class="list-group-item">SMART <strong>requires at least two category labels</strong> and the labels must be <strong>unique</strong>.</li>
            <li class="list-group-item">If you plan on uploading a data file that contains labels, the label categories in the file must match those provided on this page.</li>
            <li class="list-group-item">You cannot update the labels for a project after the project is created.</li>
          </ul>
          <table class="table table-striped">
            {{ wizard.form.management_form }}
            <div class="error-messages">{{ wizard.form.non_form_errors }}</div>
            {% for form in wizard.form %}
              {% if forloop.first %}
                <thead>
                <tr>
                  {% for field in form.visible_fields %}{% if field != data %}
                    <th>{{ field.label|capfirst }}</th>
                  {% endif %}{% endfor %}
                </tr>
                </thead>
                {% endif %}
                <tr class="formset_row_label">
                  {% for field in form.visible_fields %}
                    <td>
                      {# Include the hidden fields in the form #}
                      {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                          {{ hidden }}
                        {% endfor %}
                      {% endif %}
                      <div class="error-messages">{{ field.errors.as_ul }}</div>
                      {{ field }}
                    </td>
                  {% endfor %}
                </tr>
            {% endfor %}
          </table>
          <div class="wizard_nav_bar">
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="project">1. Info</button>
            <input class="btn btn-primary" type="submit" value="Next Step"/>
            <p class="pull-right">Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts_body %}
<script type="text/javascript">
$('.formset_row_label').formset({
  addText: 'add label',
  deleteText: 'remove label',
  prefix: 'label_set',
  added: function() {
    // Reset drop down and errors from both columns when adding new rows
    $('tr.formset_row_label').last().children(':first').find('ul.errorlist li').empty();
  }
});
</script>
{% endblock %}
